<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
	<meta name="keywords" content="筛滤淘,静态页面及JS小案例展示,html,css,javascript,canvas,jquery,vue.js,http,ajax,git,webpack">
	<meta name="format-detection" content="telephone=no">
	<meta name="description" content="静态页面及JS小案例展示">
	<meta name="author" content="lm101845">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>静态页面及JS小案例展示</title>
	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="assets/css/font-awesome.min.css" rel="stylesheet">
	<link rel="shortcut icon" href="images/logo.png">
	<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div class="jumbotron">
	<div class="container">
		<h1>静态页面及JS小案例展示
			<sup>
				<a href="https://github.com/lm101845/staticpage" target="_blank" title="Github">
					<svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16"
					     aria-hidden="true">
						<path fill-rule="evenodd"
						      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
					</svg>
				</a>
			</sup>
		</h1>
	</div>
</div>
<div class="container">
	<div class="row">
		<div class="col-md-2">
			<h5>原生PC端静态页面</h5>
			<ol>
				<li><a href="staticpage/01-云道页面-原生/index.html" target="_blank">云道页面</a></li>
				<li><a href="staticpage/02-京东商城-原生/index.html" target="_blank">京东商城</a></li>
			</ol>
			
		</div>
		<div class="col-md-2">
			<h5>CSS布局</h5>
			<ol>
				<li><a href="staticpage/03-京东首页-流式布局/index.html" target="_blank">流式布局：京东首页</a></li>
				<li><a href="staticpage/04-携程首页-Flex布局/index.html" target="_blank">Flex布局：携程首页</a></li>
				<li><a href="staticpage/05-苏宁首页-rem布局方案1/index.html" target="_blank">rem布局1：苏宁首页</a></li>
				<li><a href="staticpage/06-苏宁首页-rem布局方案2/index.html" target="_blank">rem布局2：苏宁首页</a></li>
				<li><a href="staticpage/07-撩课学院-Bootstrap布局/index.html" target="_blank">栅格布局：撩课学院</a></li>
			</ol>
		</div>
		<div class="col-md-2">
			<h5>DOMDemo</h5>
			<ol>
				<li><a href="domdemo/01-分时问候/index.html" target="_blank">分时问候</a></li>
			</ol>
		</div>
		<div class="col-md-2">
			<h5>JavaScriptDemo</h5>
			<ol>
				<li><a href="jsdemo/01-动态网页轮播图/index.html" target="_blank">动态网页轮播图</a></li>
			</ol>
		</div>
		<div class="col-md-2">
			<h5>数据处理</h5>
			<ol>
				<li><a href="internetdemo/01-本地存储/sessionStorage和localStorage.html" target="_blank">本地存储</a></li>
			</ol>
		</div>
		<div class="col-md-2">
			<h5>手写代码</h5>
			<ol>
				<!-- <li><a href="jsdemo/01-动态网页轮播图/index.html" target="_blank">动态网页轮播图</a></li> -->
			</ol>
		</div>
	</div>
</div>
<hr>
</div>
<div class="scroll-top opacity">
	<span class="arrow-icon"></span>
</div>
<script src="assets/js/jquery.min.js"></script>
<script>
  $(function () {
    $(window).scroll(function () {
      var $Height = $(window).scrollTop();
      if ($Height === 0) {
        $('.scroll-top').addClass('opacity');
      } else {
        $('.scroll-top').removeClass('opacity');
      }
      if ($Height > 100) {
        $(".scroll-top").fadeIn(500);
      } else {
        $(".scroll-top").fadeOut(500);
      }
    });
    $('.scroll-top').on('click', function () {
      $('html,body').animate({scrollTop: 0}, 500);
    });
  })
</script>
</body>
</html>